<template>
  <div>
    <div class="title_content">
      <div class="bar_title">百众点评</div>
      <div class="area">
        <span class="area_name" @click="gotoCity()">{{address}}</span>
        <img class="downIcon" src="/static/images/down.png" />
        <img class="people" src="/static/images/people.png" @click="toPerson"/>
      </div>
    </div>
    <div class="menu_content">
      <div class="menu_item">
        <img src="/static/images/eat.png" />
        <span>美食</span>
      </div>
      <div class="menu_item">
        <img src="/static/images/ktv.png" />
        <span>KTV</span>
      </div>
      <div class="menu_item">
        <img src="/static/images/foot.png" />
        <span>足疗/按摩</span>
      </div>
      <div class="menu_item">
        <img src="/static/images/hotel.png" />
        <span>酒店</span>
      </div>
      <div class="menu_item">
        <img src="/static/images/improve.png" />
        <span>丽人/美发</span>
      </div>
    </div>
    <div class="line_gray"></div>
    <div class="gass_love">
      <span class="love_title">猜你喜欢</span>

      <div class="love_item" v-for="(item,key) in gassLoveList" :key="key" @click="toDetail(item._id)">
        <img :src="'cloud://vera-2a4aw.7665-vera-2a4aw-1303890476/'+item.image_path" />
        <ul class="list_right">
          <li class="list_title">{{item.title}}</li>
          <li class="list_price">
            <img src="/static/images/b-star.png" />
            <img src="/static/images/b-star.png" />
            <img src="/static/images/b-star.png" />
            <img src="/static/images/b-star.png" />
            <img src="/static/images/b-star.png" />
            ￥{{item.price}}/人
            </li>
          <li class="list_local">{{item.classify}}</li>
          <li class="list_tag">
            <template v-for="(label,k) in item.list_tag">
              <span :key="k" v-if="label!=''">{{label}}</span>
            </template>
          </li>
        </ul>
      </div>

    </div>
    <div class="loading" v-if="!isRequest">
          正在加载更多内容...
    </div>
  </div>
</template>

<script>
// 引入SDK核心类
var QQMapWX = require('@/utils/qqmap-wx-jssdk.js');
 
// 实例化API核心类 腾讯位置服务key
var qqmapsdk = new QQMapWX({
    key: 'XCNBZ-5BAR4-3QIUJ-D7744-PRNN7-VYBIO' // 必填
});  
const app = getApp(); //全局变量
const db = wx.cloud.database();

export default {
  data() {
    return {
      address:'加载中...',
      gassLoveList:[],
      isRequest:false,
      page:1
    };
  },
  onShow(){
    if(app.globalData.address){  // 全局变量内存是否存在已选地址？
      this.address = app.globalData.address
    }
  },
  onLoad(){
    this.getData();
    wx.getLocation({   //获取用户位置
      type: 'wgs84',
      success:(res)=>{
        const latitude = res.latitude
        const longitude = res.longitude
        qqmapsdk.reverseGeocoder({  // 腾讯位置服务提供方法
          location: {  // 通过经纬度 逆解析成地址信息
            latitude,
            longitude
          },
          success:(res)=>{
            let {city} = res.result.address_component;
            this.address = city;
          }
        })

      }
    })
  },
  onReachBottom(){
    this.getMoreData();
  },
  methods:{
    getData(){
      // 初次获取默认20条数据
      db.collection('1015test0526').get().then(res=>{
        for(let i=0;i<res.data.length;i++){  // 最多展示4个标签
          res.data[i]['list_tag'] = res.data[i]['label'].split(',').slice(0,4)
        }
        this.gassLoveList = res.data;
        console.log('首次获取数据 ',this.gassLoveList);
        this.isRequest = false;
        this.page++;
      })
    },
    getMoreData(){
      this.isRequest = true;
      // skip() 从第几条开始获取 MongoDB语法
      // limit(n)获取长度为n条数据
      db.collection('1015test0526').skip((this.page-1)*20).limit(20).get().then(res=>{
        for(let i=0;i<res.data.length;i++){
          res.data[i]['list_tag'] = res.data[i]['label'].split(',').slice(0,4)
        }
        this.gassLoveList = [...this.gassLoveList,...res.data];  // 合并数据
        console.log('获取到更多数据 ',this.gassLoveList);
        this.isRequest = false;
        this.page++;
      })
    },
    gotoCity(){
      wx.navigateTo({
        url:"/pages/city/main?address="+this.address
      })
    },
    toDetail(id){
      wx.navigateTo({
        url:"/pages/detail/main?id="+id
      })
    },
    toPerson(){
      wx.navigateTo({
        url:"/pages/personal/main"
      })
    }
  }
};
</script>

<style scoped>

.home_container {
  width: 750rpx;
  height: 300rpx;
  background: red;
}

.title_content {
  width: 750rpx;
  height: 194rpx;
  background: #181818;
  display: flex;
  flex-direction: column;
}
.bar_title {
  color: white;
  margin-top: 60rpx;
  margin-left: 34.5rpx;
  font-size: 28rpx;
}
.area {
  color: #d4ab81;
  font-size: 22rpx;
  margin-top: 33rpx;
}
.area_name {
  margin-left: 36rpx;
  margin-right: 9rpx;
}
.downIcon {
  width: 10rpx;
  height: 8rpx;
}
.people {
  width: 48rpx;
  height: 48rpx;
  vertical-align: middle;
  position: absolute;
  right: 28rpx;
}
.menu_content {
  width: 750rpx;
  height: 198rpx;
  display: flex;
  flex-direction: row;
}

.line_gray {
  height: 18rpx;
  background: #f0f0f0;
  width: 750rpx;
}
.menu_item {
  flex: 1;
  text-align: center;
}
.menu_item img {
  width: 88rpx;
  height: 88rpx;
  margin: 20rpx 20rpx;
}
.menu_item span {
  font-size: 24rpx;
}
/* 猜你喜欢 */
.gass_love {
  display: flex;
  flex-direction: column;
  padding-left: 28rpx;
}
.love_item {
  width: 750rpx;
  height: 208rpx;
  border-bottom: 4rpx solid #f0f0f0;
}
.love_title {
  font-size: 30rpx;
  color: #7c7c7c;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}
.love_item {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.love_item img {
  width: 155rpx;
  height: 155rpx;
  border: 2px solid#f0f0f0;
}
.list_right{
  margin-left: 28rpx;
}
.list_title{
  font-weight: bold;
  font-size: 28rpx;
  margin-bottom: 8rpx;
}
.list_price{
  font-size: 20rpx;
   margin-bottom: 8rpx;
}
.list_price img{
  width: 25rpx;
  height: 25rpx;
  vertical-align: middle;
}
.list_local{
  font-size: 20rpx;
  color: #666666;
   margin-bottom: 8rpx;
}
.list_tag{
  display: flex;
  flex-direction: row;
}
.list_tag span{
  display: flex;
  font-size: 20rpx;
  color: #666666;
  border: 1px solid #bbbbbb;
  width: 108rpx;
  height: 41rpx;
  justify-content:center;
  align-items: center;
  margin-right: 8rpx;
}
.loading{
  width: 750rpx;
  background: #f0f0f0;
  color: #666666;
  text-align: center;
  padding-top: 30rpx;
  font-size: 24rpx;
}
</style>
